<template>
	<div
		@click="backBottom"
		v-if="data"
		class="mt-1 w-full h-[32px] rounded-full bg-[var(--color-success)]">
		<transition
			enter-active-class="animate__animated animate__fadeIn"
			leave-active-class="animate__animated animate__fadeOut">
			<div
				@click="backBottom"
				v-show="display"
				class="w-full h-[32px] px-4 flex items-center justify-between cursor-pointer">
				<BaseIcon class="text-xl" name="star" />
				<div class="flex-1 px-4">
					<n-grid :cols="12">
						<n-gi :span="4">
							<div class="h-full flex items-center">
								<div class="rounded-sm w-[24px] h-[24px] overflow-hidden">
									<base-image
										:src="imgSrc"
										:type="imgServer"
										class="w-[24px] h-[24px] object-cover"></base-image>
								</div>
								<span class="ml-2 py-1 overflow-hidden text-ellipsis whitespace-nowrap">
									{{ data.gameName }}
								</span>
							</div>
						</n-gi>
						<n-gi :span="2">
							<div class="h-full flex items-center">
								<account-vip :level="data.vip || 0"></account-vip>
								<span class="ml-1 py-1 overflow-y-hidden text-ellipsis whitespace-nowrap">
									{{ data.nickName || data.userName }}
								</span>
							</div>
						</n-gi>
						<n-gi :span="2">
							<div class="h-full flex items-center flex-row-reverse">
								<span><up-amount :value="(data.payout / data.multiplier).toFixed(1)" /></span>
							</div>
						</n-gi>
						<n-gi :span="2">
							<div class="h-full flex items-center flex-row-reverse">
								<span>{{ data.multiplier?.toFixed(1) }}X</span>
							</div>
						</n-gi>
						<n-gi :span="2">
							<div class="h-full flex items-center flex-row-reverse">
								<span><up-amount :value="data.payout || 0" /></span>
							</div>
						</n-gi>
					</n-grid>
				</div>
				<BaseIcon class="text-xl" name="star" />
			</div>
		</transition>
	</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { NGi, NGrid } from 'naive-ui'
import { computed, watch } from 'vue'
import { BaseIcon, BaseImage } from '@/components/base'
import { UpAmount } from '@/components/up'
import AccountVip from '@/components/account/account-vip/index.vue'
import { useSlotStore, useCasinoStore } from '@/store'

const slotStore = useSlotStore()
const casinoStore = useCasinoStore()
const display = ref(true)

const props = defineProps({
	type: {
		type: String,
		default: 'slots'
	}
})

const data: any = computed(() => {
	if (props.type === 'slots') {
		return slotStore.firstLiverBigWinner
	}
	return casinoStore.firstLiverBigWinner
})

watch(data, (val, oldVal) => {
	if (val?.betOrderId === oldVal?.betOrderId) return
	display.value = false
	setTimeout(() => {
		display.value = true
	}, 800)
})

const imgSrc = computed(() => {
	if (data.value.gameIcon) {
		return data.value.gameIcon
	}
	if (data.value.icon) {
		return data.value.icon
	}
	return 'placeholder.svg'
})

const imgServer = computed(() => {
	if (imgSrc.value.indexOf('http') === 0) {
		return 'network'
	}
	if (imgSrc.value !== 'placeholder.svg') {
		return 'server'
	}
	return 'local'
})

const backBottom = () => {
	document.getElementById('live-big__win')?.scrollIntoView({
		behavior: 'smooth'
	})
}
</script>
